<template>
<!-- 封装一个导航的头部 -->
  <div>
    <ul class="top-Nav">
      <li>
        <router-link exact to="/">首页</router-link>
      </li>
      <li>
        <router-link to="/Home">榜单</router-link>
      </li>
      <li>
        <router-link to="/Mine">我的</router-link>
      </li>
      <li>
        <router-link to="/Search">搜索</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped lang='less'>
 .top-Nav {
  display: flex;
  background-color:#fff ;
  li {
    flex: 1;
    text-align: center;
    padding-top:10px;
    a {
      display: block;
      padding-bottom: 8px;
    }
    .active {
      border-bottom: 2px solid red;
    }
  }
 }
</style>
